<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
<ArticleItem v-for="obj in channelArr" :key="obj.art_id" :obj="obj"  @click="moreFn(obj.art_id)"></ArticleItem>
</van-list>
</van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from './components/ArticleItem.vue'
import { getArticleAPI } from '@/api'
export default {
  props: {
    channelId: Number
  },
  data () {
    return {
      channelArr: [],
      loading: false,
      finished: false,
      timestamp: new Date(),
      isLoading: false
    }
  },
  components: {
    ArticleItem
  },
  created () {
    this.acticle()
  },
  methods: {
    moreFn (id) {
      // 获取文章详情`
      this.$router.push({
        path: '/article_detail',
        query: {
          aId: id
        }
      })
    },
    async acticle () {
      const res = await getArticleAPI({ channel_id: this.channelId, timestamp: this.timestamp })
      console.log(res)
      this.channelArr = [...this.channelArr, ...res.data.data.results]
      if (res.data?.data?.pre_timestamp === null) {
        this.finished = true
        this.timestamp = null
      } else {
        this.timestamp = res.data.data.pre_timestamp
      }
      // if (res.data.data && res.data.data.results && res.data.data.results.length === 0) {
      //   this.finished = true
      // }

      this.loading = false
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    },
    onLoad () {
      // 异步更新数据
      if (this.channelArr.length > 0) {
        this.acticle()
      }

      // 数据全部加载状态结束
    },
    onRefresh () {
      this.channelArr = []
      this.timestamp = new Date()
      this.acticle()
    }
  }
}

</script>

<style scoped lang="less">

</style>
